<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<%
  out.clear();
  String tblWidth="950px";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>	
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>上传产品图片</title>
<link href="/_resources/css/default/style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/_resources/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/_resources/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/_resources/easyui/themes/extIcon.css">
	<link rel="stylesheet" type="text/css" href="/_resources/easyui/demo/demo.css">
	<script type="text/javascript" src="/_resources/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="/_resources/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="/_resources/js/jqueryUtils.js"></script>
	<script type="text/javascript" src="/_resources/js/date.js"></script>
	<script type="text/javascript" src="/_resources/plupload-2.3.3/js/plupload.full.min.js"></script>
<script language='javascript'>

	function jsUpload(){
		if($('#file').val() ==''){
			alert('请选择导入文件');
			return;
		}
		var fileName = $('#file').val();
		if( $('#importForm').find("input[name=savingFlag]").val() ==1){
			alert('请不要重复点击');
			return;
		}
		
		$('#importForm').find("input[name=savingFlag]").val(1);
		$('#importForm').submit();
	}	 
	
	function delFile(fileName){
		$.ajax({
			type: 'POST',
			url: "delUploadedImage.do" ,
			data: {fileName:fileName},
			dataType: "json",
			error:function(){ alert('系统异常'); },
			success: function(json){
			  	if(json.errorCode == 200){
			  		$('#grid').datagrid('load');
			  	}
			}
		});
	}
	
	$(function() {
	  grid = $('#grid').datagrid({
				title : '',
				url : 'uploadedImageData.do',
				striped:true,
				rownumbers : true,
				idField : 'name',
				columns : [ [ 
				{
					width : 200,
					title : '文件名',
					align:'center',
					field : 'name',
					formatter: function(value,row,index){
						return row.name;
					} 
				},{
					width : 120,
					title : '上传时间',
					align:'center',
					field : 'memo',
					formatter: function(value,row,index){
						return row.memo;
					} 
				},{
					width : 120,
					title : '操作',
					align:'center',
					field : 'id11',
					formatter: function(value,row,index){
						return "<a href='javascript:void(0)' onclick='delFile(\"" + row.name + "\")'>删除</a>";
					} 
				}
				] ]
			});
	  }); 
</script>
</head>
<body class="easyui-layout" data-options="fit:true,border:false">

<c:if test="${singlePage}">
<table width=800px>
  <tr><td height=10></td></tr>
  <tr><td width=100% align='center' height=30 class='title'>上传的产品图片</td></tr>
</table>
</c:if>

<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
<br />

<div id="container" style='margin-left:20px'>
    <a id="pickfiles" href="javascript:;">[Select files]</a> 
    <a id="uploadfiles" href="javascript:;">[Upload files]</a>
</div>

<br />
<pre id="console"></pre>
	
	<table id="grid" class="easyui-datagrid" data-options="fit:true,border:false">
	</table>
	


<script type="text/javascript">
// Custom example logic

var uploader = new plupload.Uploader({
	runtimes : 'html5,flash,silverlight,html4',
	browse_button : 'pickfiles', // you can pass an id...
	container: document.getElementById('container'), // ... or DOM Element itself
	url : 'uploadImage.do',
	flash_swf_url : '/_resources/plupload-2.3.3/js/Moxie.swf',
	silverlight_xap_url : '/_resources/plupload-2.3.3/js/Moxie.xap',
	
	filters : {
		max_file_size : '1mb',
		mime_types: [
			{title : "Image files", extensions : "jpg,gif,png"},
			{title : "Zip files", extensions : "zip"}
		]
	},

	init: {
		PostInit: function() {
			document.getElementById('filelist').innerHTML = '';

			document.getElementById('uploadfiles').onclick = function() {
				uploader.start();
				return false;
			};
		},

		FilesAdded: function(up, files) {
			plupload.each(files, function(file) {
				document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
			});
			$('#grid').datagrid('load');
		},

		UploadProgress: function(up, file) {
			document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
		},
		FileUploaded: function(up, file) {
			$('#grid').datagrid('load');
		},

		Error: function(up, err) {
			document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
		}
	}
});

uploader.init();

</script>
</body>
</html>